<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动态列新增</title>
  <link href="../static/images/favicon.ico" th:href="@{/images/me1.jpg}" rel="icon" type="image/x-ico">
  <link rel="stylesheet" href="../../static/lib/semantic/dist/semantic.min.css" th:href="@{/lib/semantic/dist/semantic.min.css}">
  <link rel="stylesheet" href="../../static/css/me.css" th:href="@{/css/me.css}">
</head>
<body>

<!--导航栏-->
<nav class="ui inverted gird-header" >
  <div class="ui container">
    <div class="ui inverted secondary stackable menu">
      <h2 class="ui olive header item" style="font-family: STSong">管理后台</h2>
      <a href="#" th:href="@{/admin/types}" class="m-item item m-mobile-hide"><i class="home icon"></i>分类管理</a>
      <a href="#" th:href="@{/admin/rows}" class="m-item item m-mobile-hide"><i class="clone outline icon"></i>动态行管理</a>
      <a href="#" th:href="@{/admin/cols}" class="m-item item m-mobile-hide"><i class="coffee icon"></i>动态列管理</a>
      <div class="right m-item m-mobile-hide menu">
        <div class="ui dropdown  item">
          <div class="text">
            <img class="ui avatar image" src="/static/images/me1.jpg" th:src="@{${session.user.avatar}}">
            <span th:text="${session.user.nickname}">oneStar</span>
          </div>
          <i class="dropdown icon"></i>
          <div class="menu">
            <a href="#" th:href="@{/admin/logout}" class="item">注销</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
    <i class="sidebar icon"></i>
  </a>
</nav>


  <div class="m-padded-tb-hugex">
  <div class="ui attached pointing menu">
    <div class="ui container">
      <div class="right menu">
        <a href="#" th:href="@{/admin/cols/input}" class="teal active item">新增</a>
        <a href="#" th:href="@{/admin/cols}" class="item">列表</a>
      </div>
    </div>
  </div>
  </div>

  <!--中间内容-->
  <div  class="m-container-small m-padded-tb-massive">
    <div class="ui container">
      <form action="#" method="post" th:action="*{id}==null ? @{/admin/cols} : @{/admin/cols/{id}(id=*{id})} " class="ui form">
        <input type="hidden" name="id" th:value="${type.getId()}">
        <div class=" field">
          <div class="ui left labeled input">
            <label class="ui teal basic label">分类code</label>
            <input type="text" name="categroyCode" placeholder="分类CODE,不能重复" th:value="${type.getCategroyCode()}">
          </div>


          <div class="ui left labeled input">
            <label class="ui teal basic label">列名</label>
            <input type="text" name="colName" placeholder="列名" th:value="${type.getColName()}">
          </div>
          <div class="ui left labeled input">
            <label class="ui teal basic label">列排序</label>
            <input type="text" name="colLevel" placeholder="列排序" th:value="${type.getColLevel()}">
          </div>

        </div>
        <div class="ui error message"></div>
        <div class="ui mini negative message" th:unless="${#strings.isEmpty(message)}" th:text="|提示： ${message}">提示：不能添加重复的分类</div>
        <div class="ui right aligned container">
          <button type="button" class="ui button" onclick="window.history.go(-1)" >返回</button>
          <button class="ui teal submit button">提交</button>
        </div>
      </form>
      <!--<form action="#" method="post" th:action="*{id}==null ? @{/admin/cols} : @{/admin/cols/{id}(id=*{id})} " class="ui form">-->
    <!--  <form id="myForm" th:action="*{id}==null ? @{/admin/cols} : @{/admin/cols/{id}(id=*{id})}" th:object="${myFormData}" method="post">
        <input type="hidden" name="id" th:value="${type.getId()}">
        <table id="items">
          <tr>
            <th>ID</th>
            <th>分类code</th>
         &lt;!&ndash;   <th>列名字</th>
            <th>列序号</th>
            <th>操作</th>&ndash;&gt;
          </tr>
          <tr th:each="item, iterStat : ${myFormData.items}">
            <td><input type="text" th:field="*{items[__${iterStat.index}__].name}" /></td>
            <td><input type="number" th:field="*{items[__${iterStat.index}__].quantity}" /></td>
          </tr>
        </table>
        <button type="button" onclick="addRow()">Add Row</button>
        <button type="submit">Submit</button>
      </form>-->
    </div>
  </div>

  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <!--底部栏-->



<script src="../../static/lib/jquery-3.2.1/jquery-3.2.1.min.js" th:src="@{/lib/jquery-3.2.1/jquery-3.2.1.min.js}"></script>
<script src="../../static/lib/semantic/dist/semantic.min.js" th:src="@{/lib/semantic/dist/semantic.min.js}"></script>


  <script>
      function addRow() {
          var table = document.getElementById("items");
          var rowCount = table.rows.length;
          var row = table.insertRow(rowCount);
          var cell1 = row.insertCell(0);
          var cell2 = row.insertCell(1);
          cell1.innerHTML = '<input type="text" name="items[' + (rowCount-1) + '].name" />';
          cell2.innerHTML = '<input type="number" name="items[' + (rowCount-1) + '].quantity" />';
      }

    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown').dropdown({
      on : 'hover'
    });

    $('.ui.form').form({
      fields : {
        name : {
          identifier: 'colName',
          rules: [{
            type : 'empty',
            prompt: '请输入列名称'
          }]
        },
        categroyCode : {
          identifier: 'categroyCode',
          rules: [{
            type : 'empty',
            prompt: '请输入分类CODE'
          }]
        },
        categroy : {
          identifier: 'colLevel',
          rules: [{
            type : 'empty',
            prompt: '请输入列排序'
          }]
        }/*,
        evalReq : {
          identifier: 'evalReq',
          rules: [{
            type : 'empty',
            prompt: '请输入分类名称'
          }]
        }*/
      }
    });

  </script>
</body>
</html>
